<template>
  <div id="login">
    <div ref="vantaRef" style="width:100%;height:100vh"></div>
    <div class="loginConbox">
      <div class="loginBox">
        <div class="loginCon">
          <p class="title" style="margin-right: 60px">手机商城后台管理页面</p>
          <el-card shadow="always" class="login-module" v-if="smdl">
            <div slot="header" class="clearfix formTitlt">
              <span style="color: white">密码登录</span>
              <span class="titIconbox">
              <i class="iconfont xu-saomadenglu2 fa-lg iconcolor"></i>
              <i class="iconfont xu-saomadenglu01 el-icon--right fa-lg pointer" @click="smdl = !smdl"></i>
            </span>
            </div>
            <el-form :model="loginForm" :rules="rules" ref="loginFrom" status-icon label-width="100px"
                     class="demo-ruleForm">
              <el-form-item prop="loginname">
                <el-input type="text" v-model="loginForm.loginname" auto-complete="off"
                          placeholder="请输入登录账号"></el-input>
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input type="password" v-model="loginForm.pwd" auto-complete="off" placeholder="请输入登录密码"></el-input>
              </el-form-item>
              <el-form-item prop="checkCode">
                <el-input
                    v-model="loginForm.checkCode"
                    auto-complete="off"
                    placeholder="验证码"
                    style="width: 63%;float: left"

                >

                </el-input>
                  <img :src="checkCode64" @click="getCode" style="width: 80px;height: 40px"/>
              </el-form-item>
              <el-form-item>
                <el-button class="subBtn" type="primary" @click="submitForm">登录</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>
    </div>
    <comfooter/>
  </div>
</template>

<script>
import Comfooter from "@/components/comfooter";
import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'

export default {
  components: {Comfooter},
  data() {
    // 真实姓名校验
    let checkcode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('验证码不得为空'));
      } else if (value === '') {
        callback(new Error('验证码不得为空'));
      }else if(value !== this.realCheckCode){
        callback(new Error('验证码错误'))
      } else {
        callback();
      }
    };
    // 登录信息校验
    let validateLogin = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'));
      } else {
        callback();
      }
    };

    let validatepwd = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'));
      } else if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length < 4) {
        callback(new Error('密码长度应该大于等于4'));
      } else {
        callback();
      }
    };
    return {
      smdl: true,
      // 登录数据
      loginForm: {
        loginname: "admin",
        pwd: "123456",
        checkcode:"",
      },
      // 验证码
      checkCode64: "",
      realCheckCode:"",
      // 表单验证
      rules: {
        loginname: [
          {validator: validateLogin, trigger: 'blur'}
        ],
        pwd: [
          {validator: validatepwd, trigger: 'blur'}
        ],
        checkCode: [
          {validator: checkcode, trigger: 'blur'}
        ]
      }
      // 表单验证方法
    }
  },
  // 页面创建方法
  created() {
    // 我们要在页面一创建的时候就获取一次验证码
    this.getCode()
  },
  // 特效方法
  mounted() {
    this.message()
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },

  methods: {
    // 获取验证码
    getCode() {
      this.$http.get("/Util/VfCode").then(resp => {
        if (resp.data.code===2000){
          this.realCheckCode=resp.data.data.vfCode
          this.checkCode64="data:image/png;base64,"+resp.data.data.vfCode64
        }else {
          this.$notify.error({
            title: '失败',
            message: '获取验证码失败，请点击图片刷新',
          });
        }
      })
    },
    // 提交表单的
    submitForm() {
      this.$refs['loginFrom'].validate((valid) => {
        if (valid) {
          // 向后端发送请求
          this.$http.post("/login?username=" + this.loginForm.loginname + "&password=" + this.loginForm.pwd).then(resp => {
            // 当响应码为2000的时候我们就存入token
            if (resp.data.code === 2000) {
              localStorage.setItem("userToken", resp.data.data)
              // 因为我们引入了聊天室所以要添加一个条目作为聊天室的用户名
              localStorage.setItem("user","user:"+this.loginForm.loginname)
              this.$notify({
                title: '成功',
                message: '登录成功',
                type: 'success'
              });
              // 记录一下日志
              this.$http.post("/User/Login", this.loginForm).then(resp => {
              })
              // 成功后路由到用户信息的页面页码
              this.$router.push("/home/userhome")
            } else {
              this.$notify.error({
                title: '失败',
                message: '登录失败，请检查你的账号和密码信息',
              });
              // 失败后路由到登录页码
              this.$router.push("/")
            }
          })
        } else {
          this.$notify.error({
            title: '错误！',
            message: '请正确填写表单信息',
          });
        }
      })
    },
    message() {
      const h = this.$createElement
      this.$notify({
        title: "账号密码",
        message: h("i", {style: "color: teal"}, "请填写你的账号和密码"),
        duration: 4000
      })
    }
  },
}
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}

#login {
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;

  .loginConbox {
    z-index: 999;
    position: fixed;
    top: 10%;
    left: 20%;
    color: aquamarine;
    font-weight: bolder;
  }

  .header {
    height: 60px;
    position: relative;
    background: #2d3a4b;
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.3);*/
    .logo {
      margin-left: 30px;
      width: 500px;
      float: left;
      height: 40px;
      padding-top: 10px;

      img {
        height: 100%;
      }
    }
  }

  .loginBox {
    .iconcolor {
      color: #409EFF;
    }

    padding: 74px 0 118px;

    .loginCon {
      width: 1150px;
      margin: auto;
      position: relative;
      height: 350px;

      .el-card__header {
        border-bottom: 0px;
      }

      .title {
        font-size: 36px;
        font-weight: 600;
        color: #ffffff;
        width: 500px;
        float: left;
        margin-top: 0px;

        &:first-child {
          font-size: 34px;
          margin-top: 50px;
          margin-bottom: 30px;
        }
      }

      .login-module {
        width: 380px;
        height: 350px;
        margin-top: 60px;
        border: none;
        position: absolute;
        right: 0;
        background-color: rgba(217, 108, 67, 0.1);

        .formTitlt {
          font-size: 18px;
          font-weight: 400;

          .titIconbox {
            float: right;

            .pointer {
              cursor: pointer;
            }
          }
        }

        .smalltxt {
          text-align: right;

          .a {
            text-decoration: none;
            color: #999999;
            font-size: 12px;
            margin-left: 8px;
          }
        }
      }

      .el-form-item__content {
        margin-left: 0px !important;

        .subBtn {
          width: 100%;
        }
      }
    }

    .el-input__inner, .el-button, .el-card, .el-message {
      border-radius: 0px !important;
    }

    .el-form-item__content .ico {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 999;
      width: 40px;
      height: 39px;
      text-align: center;
      border-right: 1px solid #ccc;
    }

    .ewmbox {
      width: 100%;
      height: 240px;
      margin-top: -25px;

      .ewm {
        width: 140px;
        height: 140px;
        margin: 20px auto;

        p {
          font-size: 12px;
          padding-left: 40px;
          margin: 0;
        }
      }

      .ewmicon {
        width: 140px;
        margin: 20px auto 0;

        .iconfont {
          float: left;
        }

        p {
          font-size: 12px;
          padding-left: 40px;
          margin: 0;
        }
      }
    }
  }
}
</style>
